<template>
  <span>个人信息</span>
    <el-divider />
  
    <div class="user-content">
      <div class="user-details">
        <el-avatar :size="100" :src="userInfo.userPic || avatar" class="user-avatar"></el-avatar>
        <div class="user-meta">
          <div><strong>用户名:</strong> {{ userInfo.username || '未提供' }}</div>
          <div>
            <strong>性别:</strong>
            <span v-if="userInfo.gender === '1'">男</span>
            <span v-else-if="userInfo.gender === '0'">女</span>
            <span v-else>未提供</span>
          </div>
          <div><strong>年龄:</strong> {{ userInfo.age || '未提供' }}</div>
          <div><strong>电话:</strong> {{ userInfo.phone || '未提供' }}</div>
          <div><strong>邮箱:</strong> {{ userInfo.email || '未提供' }}</div>
        </div>
      </div>
      <el-button type="primary"  @click="dialogVisible = true">修改个人信息</el-button>
      <el-divider></el-divider>
      
       
    </div>
    <el-dialog title="修改个人信息" v-model="dialogVisible" width="50%">
      <el-form :model="tempUserInfo" :rules="rules" ref="editForm" label-width="100px" size="large">
        <el-form-item label="登录名称">
          <el-input v-model="tempUserInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="tempUserInfo.nickname"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="tempUserInfo.gender" placeholder="请选择性别">
            <!-- 在数据库存储中，0表示女生，1表示男生 -->
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="tempUserInfo.age" type="number"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="tempUserInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="tempUserInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUpload">
            <img v-if="tempUserInfo.userPic" :src="tempUserInfo.userPic" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEditForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

</template>

<script setup>
import { ref, watch } from 'vue'
import useUserInfoStore from '@/stores/userInfo.js'
import { userInfoUpdateService, userAvatarUpdateService } from '@/api/user.js'
import { ElMessage } from 'element-plus'

const userInfoStore = useUserInfoStore()
const userInfo = ref({ ...userInfoStore.info })
const tempUserInfo = ref({}) // 临时存储编辑的数据
const dialogVisible = ref(false) // 控制对话框的显示和隐藏

const rules = {
  nickname: [
    {
      pattern: /^\S{2,10}$/,
      message: '昵称必须是2-10位的非空字符串',
      trigger: 'blur'
    }
  ],
  email: [
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
}

// 监听 dialogVisible 的变化，当对话框打开时，复制 userInfo 到 tempUserInfo
watch(dialogVisible, (newValue) => {
  if (newValue) {
    tempUserInfo.value = { ...userInfo.value }
  }
})

// 修改个人信息
const updateUserInfo = async () => {
  // 调用接口
  let result = await userInfoUpdateService(userInfo.value)
  ElMessage.success(result.msg ? result.msg : '修改成功')

  // 修改 pinia 中的个人信息
  userInfoStore.setInfo(userInfo.value)
}

// 提交编辑表单
const editForm = ref(null)
const submitEditForm = async () => {
  editForm.value.validate(async (valid) => {
    if (valid) {
      // 调用接口
      let result = await userInfoUpdateService(tempUserInfo.value)
     
        ElMessage.success(result.msg ? result.msg : '修改成功')
        // 更新 userInfo 和 userInfoStore
        userInfo.value = { ...tempUserInfo.value }
        userInfoStore.setInfo(userInfo.value)
        dialogVisible.value = false
       
    } else {
      ElMessage.error('请检查表单信息')
      return false
    }
  })
}

// 处理头像上传成功
const handleAvatarSuccess = (response, file) => {
  tempUserInfo.value.userPic = response.data // 假设后端返回的图片URL在 response.data 中
}

// 在上传前进行文件验证
const beforeUpload = (file) => {
  const isJPGPNGPDF = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf'
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isJPGPNGPDF) {
    ElMessage.error('只能上传jpg/png/pdf文件!')
  }
  if (!isLt10M) {
    ElMessage.error('上传文件大小不能超过10MB!')
  }
  return isJPGPNGPDF && isLt10M
}
</script>

<style scoped>

.user-card {
  height: 100%;
  margin: 5px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}

.user-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.user-details {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.user-avatar {
  margin-right: 20px;
}

.user-meta {
  display: flex;
  flex-direction: column;
}

.user-meta div {
  margin-bottom: 8px;
}

.el-divider {
  margin: 20px 0;
}

.el-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>